<template>
  <div>
    <LinkageSwiper v-model="currentIndex" :tabs="navTabs">
      <template v-for="(item, index) in navTabs" :key="index" v-slot:[index]>
        <component :is="item.is" :type="item.type" />
      </template>
    </LinkageSwiper>
    <BottomMenu></BottomMenu>
  </div>
</template>

<script>
import { shallowRef } from 'vue';
import BottomMenu from 'lottery/components/BottomMenu/BottomMenu';
import LinkageSwiper from 'lottery/components/LinkageSwiper/LinkageSwiper';
import {
  Recommend, VideoSet, Ssq, Dlt, Fc3d, Kl8, HitPrice,
} from './pages';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  components: { BottomMenu, LinkageSwiper },
  data() {
    return {
      currentIndex: 0,
      navTabs: [
        {
          title: '推荐',
          is: shallowRef(Recommend),
          type: 0,
        },
        {
          title: '视频',
          is: shallowRef(VideoSet),
          type: 1,
        },
        {
          title: '双色球',
          is: shallowRef(Ssq),
          type: 2,
        },
        {
          title: '大乐透',
          is: shallowRef(Dlt),
          type: 3,
        },
        {
          title: '福彩3D',
          is: shallowRef(Fc3d),
          type: 4,
        },
        {
          title: '快乐8',
          is: shallowRef(Kl8),
          type: 5,
        },
        {
          title: '中奖新闻',
          is: shallowRef(HitPrice),
          type: 6,
        },
      ],
    };
  },

  mounted() {},
};
</script>

<style lang="scss" scoped>
</style>
